iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
自我挑戰組

邊工作邊進行前端學習之旅系列 第 14

[Day 14] 進入JavaScript,認識瀏覽器中的JS

  • 分享至 

  • xImage
  •  

前言

前面幾天說了很多CSS\SCSS的介紹和學習方式,終於要踏入JS啦,邊學習的過程也可以發現他要學習的有基礎語法、觀念有很多,時常學了新的,忘了舊的,剛好趁著鐵人賽能夠再整理下筆記,藉此複習一下。
接下來的文章,多是以JS為主,主要涵蓋基礎觀念、實作練習,文章內也還是會放一些自己的學習心得、方式。

如何開始認識 JavaScript

如同前面幾天文章介紹,會到 MDN 來查閱相關名詞。在 MDN - JavaScript 是什麼? 介紹了JS 可以做什麼事、它的編譯方式、如何載入等等。
另外,搭配今天的文章主題,也可以觀看彭彭老師的網頁前端工程入門:HTML DOM

來談談DOM

  • 因為 DOM 是 JS 處理網頁的關鍵,所以把它放在最前面來認識。
  • DOM 全名為 Document Object Model 中文翻譯為 文件物件模型

KURO 老師:
DOM 是一個將 HTML 文件以樹狀的結構來表示的模型,而組合起來的樹狀圖,我們稱之為「DOM Tree」。
Huli:瀏覽器提供該橋樑,讓我們用JS去改面畫面的東西

抓取 HTML 文件

DOM API : DOM 提供描述 HTML 或 XML 文件的邏輯架構與提供應用程式的撰寫介面,可以利用此 API 可以建立文件內容、查看文件結構、以及添加、修改、和刪除文件的元件與內容

那JS要如何去抓取到文件中某標籤呢? 以下我們將分別介紹5種方法,來取得相應的資料。

1. getElementsByTagName : 抓取 HTML 中某標籤的元素


 <body>
<div>
    hello~

  </div>
  <div>
    yo!
  </div>
  <script>

    const elements = document.getElementsByTagName('div');
    console.log(elements);
  </script>
  </body>
 
  • 抓到 2 個 div

2. getElementsByClassName: 抓取 html 中某 class 元素

  • 有好幾個相同名稱的class,會一並抓取

<body>
 <h1>DOM
 </h1>
 <div class="block1">
   hello~

 </div>
 <div>
   yo!
 </div>
 <script>

   const elements = document.getElementsByClassName('block1');
   console.log(elements);
 </script>
</body>


  • 抓到 class 為 block1 的div

3. getElementById : 這是用來抓取指定 ID

* 注意:getElement 沒有加s! 可以記得ID只有一個,所以 getElement 沒有加 s。
<body>
  <h1>DOM
  </h1>
  <div class="block1">
    hello~

  </div>
  <div id="myyo">
    yo!
  </div>
  <script>
    const elements = document.getElementById('myyo');
    console.log(elements);
  </script>
</body>

4. querySelector: 後面接的是css選擇器

  • 只會針對元素的第一筆資料,其他並不會被選入這時候可以使用
  • 選擇tag標籤:(div):注意:使用此方式當html有多個div,他只會選擇到第一個符合的
  • 選擇cass : (.calssName)
  • 選擇id : (#idName)

5. querySelectorAll : 可以選取多個元素

<body>
  <h1>DOM
  </h1>
  <div class="block1">
    hello~

  </div>
  <div id="myyo">
    yo!
    <a href="#">hello</a>
  </div>
  <script>

    const elements = document.querySelectorAll('div');
    console.log(elements);
  </script>

Eloquent JavaScript, 3rd Edition

Day03-深入理解網頁架構:DOM
JS 筆記 - 認識 DOM 文件物件模型


上一篇
[Day 13] SCSS 結合 Bootstrap 網頁製作
下一篇
[Day 15] JavaScript 與瀏覽器的溝通
系列文
邊工作邊進行前端學習之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言